<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
	<head>
		<meta charset="utf-8">
		<title>首页番剧</title>
		<!--引入 JavaScript文件和jQuery-->
		<!--引入顺序：jQuery，然后Popper.js，然后Bootstrap.js-->
		<script th:src="@{/js/jquery.min.js}"></script>
		<script th:src="@{/js/bootstrap.bundle.js}"></script>
		<script type="text/javascript">
			function _go(tp) {
				let url = $("a[name='2']").attr("id");
				let pc = $("#pageCode").val();//获取文本框中的当前页码
				if(!/^[1-9]\d*$/.test(pc)) {//对当前页码进行整数校验
					alert('请输入正确的页码！');
					return;
				}
				/*判断当前页码是否大于最大页*/
				if(pc>tp) {
					alert('请输入正确的页码！');
					return;
				}
				location = url+"&pc="+pc;
			}
			function _go1(direction) {
				let urll = $("button[name=1]").attr("id");
				location = "/findByFans"+urll+"/"+direction;
			}
			function _go2(direction) {
				let urll = $("button[name=1]").attr("id");
				location = "/findByGrade"+urll+"/"+direction;
			}
			function _go3(direction) {
				let urll = $("button[name=1]").attr("id");
				location = "/findByTotalamount"+urll+"/"+direction;
			}
		</script>
		
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		
		<!--引入Bootstrap CSS-->
		<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
		
		
	</head>
	<body>
		<!--导航栏开始-->
		<iframe th:src="@{/navigation/navigationBar.html}"
		frameBorder="0" width="100%" scrolling="no" height="70px"></iframe>
		<!--导航栏结束-->

		<!--头部开始-->
		<iframe th:src="@{/navigation/header.html}"
		frameBorder="0" width="100%" scrolling="no" height="120px"></iframe>
		<!--头部结束-->
		
		<!--索引框开始-->
		<section class="mt-4">
			<div class="container">
				<div class="row">
					<div class="col-4">
						<div class="card">
						  <h5 class="card-header">筛选</h5>
						  <div class="card-body">
							<a th:href="@{/findAllFan}" class="badge badge-pill badge-info active">全部</a>
							<span th:each="fanCla:${session.fanClass}">
        						<a th:href="@{/findByClassification}+'?classid='+${fanCla.classid}" th:text="${fanCla.classification}" class="badge badge-pill badge-info"></a>
    						</span>
						  </div>
						</div>
					</div>
					<div class="col-8">
						<button type="button" class="btn btn-outline-info mr-2" th:onclick="|javascript:_go1('desc')|" th:id="${session.urll}" th:name="1">追番人数↓</button>
						<button type="button" class="btn btn-outline-info mr-2" th:onclick="|javascript:_go1('asc')|">追番人数↑</button>
						<button type="button" class="btn btn-outline-info mr-2" th:onclick="|javascript:_go2('desc')|">最高评分↓</button>
						<button type="button" class="btn btn-outline-info mr-2" th:onclick="|javascript:_go2('asc')|">最高评分↑</button>
						<button type="button" class="btn btn-outline-info mr-2" th:onclick="|javascript:_go3('desc')|">播放数量↑</button>
						<button type="button" class="btn btn-outline-info mr-2" th:onclick="|javascript:_go3('asc')|">播放数量↓</button>
						<hr />
<!--						<span th:each="fan:${page.getBeanList()}">-->
						<div class="card-deck">
							<!--筛选列表开始-->
							<span th:each="fan:${page.getBeanList()}">
								<div class="card mt-3 p-2" style="height:350px;width:200px">
									<img th:src="@{/s_img/}+${fan.fid}+@{.png}" class="card-img-top" alt="...">
							  		<div class="card-body">
							    		<p class="card-text">
											<a th:href="@{/findFanByFname/}+${fan.fid}+@{/true}" class="card-text" th:text="${fan.fname}"></a>
										</p>
							  		</div>
								</div>
							</span>
						</div>
						<hr/>

						<!--分页开始-->
						<ul class="pagination">
						    <li class="page-item">
								<span class="page-link" href="#" aria-label="Previous" th:if="${page.pc==1}">
									<span aria-hidden="true">&laquo;</span>
								</span>
						      <a class="page-link" href="#" aria-label="Previous" th:unless="${page.pc==1}" th:href="@{${page.url}}+@{&pc=}+${page.pc-1}">
						        <span aria-hidden="true">&laquo;</span>
						      </a>
						    </li>
							<ul class="pagination" th:if="${page.tp<=6}">
								<span th:each="i:${#numbers.sequence(1,page.tp)}">
									<li class="page-item"><span class="page-link" th:if="${i==page.pc}">[[${i}]]</span></li>
									<li class="page-item"><a class="page-link" th:href="@{${page.url}}+@{&pc=}+@{${i}}" th:unless="${i==page.pc}">[[${i}]]</a></li>
								</span>
							</ul>
							<span th:unless="${page.tp<=6}">
								<ul class="pagination" th:if="${page.pc}-${2}<1">
									<span th:each="i:${#numbers.sequence(1,6)}">
										<li class="page-item"><span class="page-link" th:if="${i==page.pc}">[[${i}]]</span></li>
										<li class="page-item"><a class="page-link" th:href="@{${page.url}}+@{&pc=}+@{${i}}" th:unless="${i==page.pc}">[[${i}]]</a></li>
									</span>
								</ul>
								<span th:if="${page.pc}+${3}>${page.tp}">
									<ul class="pagination" th:with="open=${page.tp}-${5}">
										<span th:each="i:${#numbers.sequence(open,page.tp)}">
											<li class="page-item"><span class="page-link" th:if="${i==page.pc}">[[${i}]]</span></li>
											<li class="page-item"><a class="page-link" th:href="@{${page.url}}+@{&pc=}+@{${i}}" th:unless="${i==page.pc}">[[${i}]]</a></li>
										</span>
									</ul>
								</span>
								<span th:if="${page.pc}+${3}<=${page.tp} and ${page.pc}-${2}>=1">
									<ul class="pagination" th:with="open=${page.pc}-${2},close=${page.pc}+${3}">
										<span th:each="i:${#numbers.sequence(open,close)}">
											<li class="page-item"><span class="page-link" th:if="${i==page.pc}">[[${i}]]</span></li>
											<li class="page-item"><a class="page-link" th:href="@{${page.url}}+@{&pc=}+@{${i}}" th:unless="${i==page.pc}">[[${i}]]</a></li>
										</span>
									</ul>
								</span>
							</span>
<!--						    <li class="page-item"><a class="page-link" href="#">1</a></li>-->

						    <li class="page-item">
								<span class="page-link" href="#" aria-label="Next" th:if="${page.pc==page.tp}">
									<span aria-hidden="true">&raquo;</span>
								</span>
						      <a class="page-link" href="#" aria-label="Next" th:href="@{${page.url }}+@{&pc=}+${page.pc+1}" th:unless="${page.pc==page.tp}">
						        <span aria-hidden="true">&raquo;</span>
						      </a>
						    </li>
							<li class="page-item"><span class="page-link">共[[${page.tp}]]页</span></li>
							<li class="page-item"><span class="page-link">到</span></li>
							<input type="text" id="pageCode" th:value="${page.pc }"/>
							<li class="page-item"><span class="page-link">页</span></li>
							<li class="page-item"><a class="page-link" th:onclick="|javascript:_go(${page.tp})|" th:id="${page.url}" th:name="2">确定</a></li>
						  </ul>
						<!--分页结束-->
					</div>
				</div>

			</div>
		</section>

		<!--索引框结束-->
		


	</body>
</html>
